<template>
  <div class="treatModify">
    <div class="header" style="font-size: 18px">
      <div class="line"></div>
      编辑签约信息
    </div>
    <div class="line2"></div>
    <div class="title">居民信息</div>
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="treatInfo"
      label-width="80px"
      class="demo-ruleForm"
      size="large"
      status-icon
    >
      <template style="display: flex">
        <el-form-item label="姓名" prop="resident.name">
          <el-input
            v-model="treatInfo.resident.name"
            style="width: 200px"
            disabled
          />
        </el-form-item>
        <el-form-item label="身份证号" prop="resident.IDCard">
          <el-input v-model="treatInfo.resident.IDCard" style="width: 200px" />
        </el-form-item>
        <el-form-item label="性别" prop="resident.gender">
          <el-select v-model="treatInfo.resident.gender" style="width: 200px">
            <el-option label="男" :value="0" />
            <el-option label="女" :value="1" />
          </el-select>
        </el-form-item>
      </template>
      <template style="display: flex">
        <el-form-item label="出生年月" prop="resident.birthday">
          <el-date-picker
            v-model="treatInfo.resident.birthday"
            type="date"
            label="Pick a date"
            placeholder="Pick a date"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="resident.tel">
          <el-input v-model="treatInfo.resident.tel" style="width: 200px" />
        </el-form-item>
        <el-form-item label="现居地" prop="resident.address">
          <el-input v-model="treatInfo.resident.address" style="width: 300px" />
        </el-form-item>
      </template>
      <el-form-item label="居民标签" prop="arr">
        <el-select
          v-model="arr"
          multiple
          placeholder="Select"
          :clearable="true"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in LabelInfo"
            :key="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="家庭成员" prop="desc">
        <template style="display: flex">
          <el-card shadow="hover">
            <template style="display: flex; justify-content: space-between">
              <img
                src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1575.jpg"
                alt=""
              />
              <div class="info">
                <p style="margin-top: -10px">
                  <span>{{ emergency.emergencyContact }}</span>
                </p>
                <p style="margin-top: -15px">
                  {{ emergency.emergencyNumber }}
                </p>
              </div>
              <img
                src="https://cdn7.axureshop.com/demo/1881228/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1576.png"
                alt=""
              />
            </template>
          </el-card>
        </template>
      </el-form-item>
    </el-form>
    <div class="line2"></div>
    <div class="title">签约信息</div>
    <el-form
      ref="ruleFormRef"
      :model="treatInfo"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
      size="large"
      status-icon
    >
      <template style="display: flex">
        <el-form-item label="签约编号" prop="number">
          <div style="width: 200px">{{ treatInfo.number }}</div>
        </el-form-item>
        <el-form-item label="签约状态" prop="status"
          ><div style="width: 200px">
            <template v-if="treatInfo.status == 0">
              <span style="color: #3dd4a7">待审核</span>
            </template>
            <template v-if="treatInfo.status == 1"
              ><span style="color: #fddb78"> 审核通过，等待用户支付</span>
            </template>
            <template v-if="treatInfo.status == 2"
              ><span style="color: #fa746b"
                >已驳回，等待居民修改</span
              ></template
            >
            <template v-if="treatInfo.status == 3"
              ><span style="color: #3d4cd4">生效中</span>
            </template>
            <template v-if="treatInfo.status == 4"
              ><span style="color: #9fd43d">已过期</span>
            </template>
          </div></el-form-item
        >
        <el-form-item label="签约机构" prop="organId">
          <el-select
            placeholder="请选择"
            v-model="treatInfo.organId"
            @change="organIdChange"
            style="width: 200px"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in agencyOrgan"
              :key="index"
            />
          </el-select>
        </el-form-item>
      </template>
      <template style="display: flex">
        <el-form-item label="签约团队" prop="teamId">
          <el-select
            placeholder="请选择"
            v-model="treatInfo.teamId"
            @change="serviceBasicChange"
            style="width: 200px"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in TeamList"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="签约医生" prop="doctorId">
          <el-select
            placeholder="请选择"
            v-model="treatInfo.doctorId"
            style="width: 200px"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in BasicDoctorList"
              :key="index"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="服务包" prop="serviceId">
          <el-select
            placeholder="请选择"
            v-model="treatInfo.serviceId"
            style="width: 200px"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in ServiceBasicList"
              :key="index"
            />
          </el-select>
        </el-form-item>
      </template>
      <template style="display: flex">
        <el-form-item label="签约类型" prop="type"
          ><div style="width: 200px">{{ treatInfo.type }}</div></el-form-item
        >
        <el-form-item label="签约周期" prop="period"
          ><div style="width: 200px">
            {{ treatInfo.service.period }}年
          </div></el-form-item
        >
        <el-form-item label="费用" prop="price"
          ><div style="width: 200px">
            ￥{{ treatInfo.service.price }}
          </div></el-form-item
        >
      </template>
      <template style="display: flex">
        <el-form-item label="申请时间" prop="subscribeTime"
          ><div style="width: 200px">{{ treatInfo.subscribeTime }}</div>
        </el-form-item>
        <el-form-item label="生效日期" prop="takingEffectTime">
          <el-date-picker
            v-model="treatInfo.takingEffectTime"
            type="date"
            label="Pick a date"
            placeholder="Pick a date"
            style="width: 200px"
        /></el-form-item>
      </template>
      <el-form-item label="签约备注" prop="notes">
        <el-input
          style="width: 600px; height: 120px"
          maxlength="300"
          placeholder="Please input"
          show-word-limit
          type="textarea"
          v-model="treatInfo.notes"
      /></el-form-item>
      <el-button type="primary" @click="play(ruleFormRef)">保存</el-button>
      <el-button @click="Return">返回</el-button>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { type FormInstance, type FormRules, ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import api from "@/api";
import sj from "@/utils/yzy/sj";
const router = useRoute();
const routerr = useRouter();
//紧急联系人
const emergency = ref({
  emergencyNumber: "",
  emergencyContact: "",
});
//信息列表
const treatInfo = ref({
  doctor: { id: "67e98bc0-ee1b-11ed-8459-c76f227cacf8", name: "段宏" },
  doctorId: "67e98bc0-ee1b-11ed-8459-c76f227cacf8",
  flag: 0,
  id: "88579930-ee50-11ed-8059-0ba99686sd93",
  labelArr: [
    {
      name: "高血脂",
      id: "123",
    },
    {
      name: "心脏病",
      id: "123",
    },
  ],
  notes: "无",
  number: "20235121407123",
  organ: {
    id: "67e98bc0-ee1b-11ed-8459-c76f227ca777",
    name: "成都市武侯区望江路社区卫生服务中心",
  },
  organId: "67e98bc0-ee1b-11ed-8459-c76f227ca777",
  resident: {
    id: "67e98bc0-ee1b-11ed-8459-ab11227ca877",
    name: "白素贞",
    IDCard: "511283199102162738",
    gender: 1,
    birthday: "1991-02-16",
    tel: "18844449999",
    address: "四川省成都市都江堰青城山",
  },
  residentId: "67e98bc0-ee1b-11ed-8459-ab11227ca877",
  service: {
    id: "8000e240-828b-11ed-a736-b1a95d18c711",
    name: "老人服务包",
    price: 1600,
    period: 1,
  },
  serviceId: "8000e240-828b-11ed-a736-b1a95d18c711",
  status: 3,
  subscribeTime: "2023-05-12 14:06:11",
  takingEffectTime: "2023-05-13 00:00:00",
  team: { id: "88579930-ee50-11ed-8059-0ba99686cabb", name: "段宏团队" },
  teamId: "88579930-ee50-11ed-8059-0ba99686cabb",
  type: "首次签约",
});
//疾病列表
const LabelInfo = ref([
  {
    id: "67e98bc0-ee1b-11ed-8459-c717227ca877",
    name: "心脏病",
    cname: "段宏",
    lastModifyTime: "2023-05-09 16:35:12",
    flag: 0,
    number: 1,
  },
]);
//机构列表
const agencyOrgan = ref([
  {
    address: "四川省成都市武侯区致民东路8号",
    contactName: "李瑞",
    contactTel: "(028)85434379",
    description:
      "成都市武侯区望江路社区卫生服务中心是政府举办的公益性医疗机构。中心系四川省全科医学中心社区培训基地、华西医院全科医学基层实践基地，同时还是四川大学华西医院、四川省人民医院、成都市第二人民医院等医院的对口辅导和双向转诊单位。2018年被国家卫生计生委评为“全国优质服务示范社区卫生服务中心”。",
    flag: 0,
    id: "67e98bc0-ee1b-11ed-8459-c76f227ca777",
    name: "成都市武侯区望江路社区卫生服务中心",
    number: "2023591753249",
    picture: "",
  },
]);
//团队列表
const TeamList = ref([
  {
    id: "88579930-ee50-11ed-8059-0ba99686esd1",
    number: "202359172987",
    name: "陈晓平团队",
    picture: "public/upload/u5598.png",
    organId: "67e98bc0-ee1b-11ed-8459-c76f227ca578",
    score: 5,
    shareCount: 0,
    status: 0,
    flag: 0,
  },
]);
//医生列表
const BasicDoctorList = ref([
  {
    id: "67e98bc0-ee1b-11ed-8459-c76f227ca999",
    name: "陈晓平",
  },
]);
//服务包列表
const ServiceBasicList = ref([
  {
    id: "7909bde0-828b-11ed-a736-b1a95d18c716",
    name: "0~6岁儿童服务包",
    targetAudience: "0~6岁儿童",
    picture: "public/upload/u4827.png",
    labelArr: [
      {
        name: "儿童",
      },
    ],
  },
]);
//表单校验
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  "resident.name": [
    { min: 2, max: 10, message: "姓名长度为 2 到 10 个字符", trigger: "blur" },
    { required: true, message: "必须填写", trigger: "blur" },
  ],
  "resident.IDCard": [
    { required: true, message: "必须填写", trigger: "blur" },
    {
      pattern: /^\d{17}[\dXx]$/,
      message: "请输入正确的身份证号",
      trigger: "blur",
    },
  ],
  "resident.gender": [{ required: true, message: "必须填写", trigger: "blur" }],
  "resident.birthday": [
    { required: true, message: "必须填写", trigger: "blur" },
  ],
  " resident.tel": [
    { required: true, message: "必须填写", trigger: "blur" },
    {
      pattern: /^\d{17}[\dXx]$/,
      message: "请输入正确的身份证号",
      trigger: "blur",
    },
  ],
  "resident.address": [
    { required: true, message: "必须填写", trigger: "blur" },
  ],
  arr: [{ required: true, message: "必须填写", trigger: "blur" }],
  organId: [{ required: true, message: "必须填写", trigger: "blur" }],
  teamId: [{ required: true, message: "必须填写", trigger: "blur" }],
  doctorId: [{ required: true, message: "必须填写", trigger: "blur" }],
  serviceId: [{ required: true, message: "必须填写", trigger: "blur" }],
  takingEffectTime: [{ required: true, message: "必须填写", trigger: "blur" }],
  notes: [{ required: true, message: "必须填写", trigger: "blur" }],
});
//保存
const play = async (formEl: FormInstance | undefined) => {
  console.log({
    id: treatInfo.value.id,
    residentId: treatInfo.value.residentId,
    name: treatInfo.value.resident.name,
    IDCard: treatInfo.value.resident.IDCard,
    gender: treatInfo.value.resident.gender,
    birthday: sj(treatInfo.value.resident.birthday),
    tel: treatInfo.value.resident.tel,
    address: treatInfo.value.resident.address,
    labelArrStr: JSON.stringify(
      arr.value.map((item: any) => {
        return item;
      })
    ),
    organId: treatInfo.value.organId,
    teamId: treatInfo.value.teamId,
    doctorId: treatInfo.value.doctorId,
    serviceId: treatInfo.value.serviceId,
    takingEffectTime: sj(treatInfo.value.takingEffectTime),
    notes: treatInfo.value.notes,
  });

  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (valid) {
      let result = await api.Agency.updateSignResidentApi({
        id: treatInfo.value.id,
        residentId: treatInfo.value.residentId,
        name: treatInfo.value.resident.name,
        IDCard: treatInfo.value.resident.IDCard,
        gender: treatInfo.value.resident.gender,
        birthday: sj(treatInfo.value.resident.birthday),
        tel: treatInfo.value.resident.tel,
        address: treatInfo.value.resident.address,
        labelArrStr: JSON.stringify(
          arr.value.map((item: any) => {
            return item;
          })
        ),
        organId: treatInfo.value.organId,
        teamId: treatInfo.value.teamId,
        doctorId: treatInfo.value.doctorId,
        serviceId: treatInfo.value.serviceId,
        takingEffectTime: sj(treatInfo.value.takingEffectTime),
        notes: treatInfo.value.notes,
      });
      console.log(
        JSON.stringify(
          arr.value.map((item: any) => {
            return item;
          })
        )
      );

      if (result.data.code === 200) {
        ElMessage.success("修改成功");
        routerr.push("/home/Agency/treat");
      }
    }
  });
};
//返回
const Return = () => {
  routerr.push("/home/Agency/treat");
};
//签约机构更改
const organIdChange = () => {
  getTeamByOrganId(); //团队
  treatInfo.value.serviceId = "";
  treatInfo.value.teamId = "";
  treatInfo.value.doctorId = "";
};
//医生团体更改
const serviceBasicChange = () => {
  getServiceBasic();
  getBasicDoctor();
  treatInfo.value.serviceId = "";
  treatInfo.value.doctorId = "";
};
//
const arr = ref();
//获取信息
const getTreatInfo = async () => {
  let result = await api.Agency.getAgencyInfo({ id: router.query.id });
  let result1 = await api.Agency.getResidentLabelHealth(
    result.data.data.resident.id
  );
  treatInfo.value = result.data.data;

  //标签信息
  arr.value = treatInfo.value.labelArr.map((item) => item.id);
  treatInfo.value.teamId = "";
  treatInfo.value.doctorId = "";
  treatInfo.value.serviceId = "";
  emergency.value.emergencyContact = result1.data.data.emergencyContact;
  emergency.value.emergencyNumber = result1.data.data.emergencyNumber;
};
//获取疾病列表
const getLabelBySearch = async () => {
  let result = await api.Agency.getLabelBySearchApi();
  LabelInfo.value = result.data.data.result;
};
//获取所有机构
const getAllChcsOrgan = async () => {
  let result = await api.Agency.getAllChcsOrganApi();
  agencyOrgan.value = result.data.data.rows;
};
//根据机构获取团队
const getTeamByOrganId = async () => {
  let result = await api.Agency.getTeamByOrganId(treatInfo.value.organId);
  TeamList.value = result.data.data;
};
//根据团队获取服务包
const getServiceBasic = async () => {
  let result = await api.Agency.getServiceBasicApi(treatInfo.value.teamId);
  ServiceBasicList.value = result.data.data;
};
//根据团队获取医生
const getBasicDoctor = async () => {
  let result = await api.Agency.getBasicDoctor(treatInfo.value.teamId);
  BasicDoctorList.value = result.data.data;
};
getTreatInfo();
getLabelBySearch(); //疾病列表
getAllChcsOrgan(); //机构
</script>

<style lang="scss">
.treatModify {
  width: 1150px;
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
  background-color: white;
  .header {
    @include flex(none, center, none);

    .line {
      width: 6px;
      height: 20px;
      background-color: skyblue;
      border-radius: 5px;
      margin-right: 10px;
    }
  }
  .line2 {
    width: 100%;
    border-bottom: 1px solid #eee;
    margin: 20px 0;
  }
  .title {
    margin-bottom: 20px;
  }
  .el-form {
    .el-card {
      width: 200px;
      height: 84px;
      box-sizing: border-box;
      margin-right: 20px;
      color: #999999;
      .info {
        font-size: 12px;
        div {
          line-height: 24px;
        }
        span {
          font-size: 15px;
          color: rgba(0, 0, 0, 0.829);
          margin-right: 10px;
        }
      }

      img {
        width: 40px;
        height: 40px;
      }
      img:last-of-type {
        width: 10px;
        height: 15px;
        transform: rotate(330deg);
      }
    }
    .el-form-item__label {
      font-size: 13px;
      color: #999999;
    }
    .el-form-item {
      margin-right: 80px;
      .el-textarea__inner {
        height: 120px;
      }
    }
  }
}
</style>
